<template>
  数字 : <input type="text" v-model="num" /><br />
  对应的大写字母: {{ strA }}，对应的小写字母: {{ stra }}
</template>

<script>
import { reactive, toRefs, watch } from "vue";

export default {
  setup() {
    const state = reactive({
      num: 0, // 定义数据初值
      strA: "A", // 定义对应大写字母数据变量
      stra: "a", // 定义对应小写字母数据变量
    });
    watch(
      () => state.num,
      () => {
        // 计算对应大写字母，大写字母的ASIIC码的十进制从65开始
        // String.fromCharCode(数值)函数将 Unicode 编码的数值转为一个字符
        state.strA = String.fromCharCode(65 + parseInt(state.num % 26)); // 计算对应小写字母，大写字母的ASIIC码的十进制从97开始
        state.stra = String.fromCharCode(97 + parseInt(state.num % 26));
      }
    );
    return {
      ...toRefs(state),
    };
  },
};
</script>
